<template>
    <div class="timeline">

        <h1>时间轴</h1>
        <div class="block">
            <el-timeline>
                <el-timeline-item v-for = "(item,index) in timeLine" :key="index"
                                  :timestamp="item.createTime | dateformat('YYYY-MM-DD')"
                                  placement="top"
                                  :type="timeLineStyle[index]"
                >
                    <el-card shadow="hover" @click.native="toArticleDetail(item.id)">
                        <h4>{{item.title}}</h4>
                        <p>{{item.author}} 提交于 {{item.createTime | dateformat}}</p>
                    </el-card>
                </el-timeline-item>

            </el-timeline>
        </div>
    </div>
    
</template>

<script>
    import https from "../../../https";

    export default {
        name: "timeline",
        data() {
            return {
                timeLine:null,
                timeLineStyle:['primary',  'success' , 'warning' ,'danger' , 'info'	],
            }
        },
        mounted: function () {
           this.getArticleTimeLine()
        },
        methods: {


            /**
             * 获取文章时间轴
             * */
            getArticleTimeLine() {

                https.fetchGet('/article/timeLine', ).then((res) => {


                    if (res.data.code == 200) {

                        console.log(res.data.data)
                        // 更新数据
                        this.timeLine = res.data.data
                    }
                }).catch((err) => {
                    console.log(err);
                })

            },

            /**
             * 跳转到文章详情页
             * @param articleId
             */
            toArticleDetail(articleId){
                console.log(articleId)
                this.$router.push({
                    path: `/articles/articleDetail/${articleId}`
                })
            }
        }
    }
</script>

<style scoped>

</style>